
// import React from 'react'
import { Link } from 'react-router-dom'
import style from './style.module.less'
import img from '@/img/logo.png'
import { useState } from 'react'
import AntdMenu from '../antdMenu'
import ThemeBth from './compoents/theme'
import I18nBth from './compoents/i18n'
import { useTranslation } from "react-i18next";
import Searcht from '../baseHeader/compoents/search'
import BaseLogin from './compoents/baseLogin'
import { Sticky } from 'react-vant';
//react-create-app 脚手架处理的module.less module.css module.scss样式相关文件
//通过css module 实现全局样式和组件内样式的隔离 
const BaseHeader = () => {
  // 这个地方注意 拼接类名单时候一定要加空格容易出错 所以使用 classnames来进行类名管理
  // <div className={"header" + ' ' + style.header}>
  const [count, setCount] = useState('文章');
  const { t } = useTranslation();//切换语言触发的hooks
  return (
    <>
      <Sticky>
        <div className={'BaseHeaderBox' + ' ' + style.BaseHeaderBox}>

          <div className={'BaseHeader' + ' ' + style.BaseHeader}>
            <div className={'header' + ' ' + style.header}>
              <img src={img} alt="" />
            </div >
            <div className={'main' + ' ' + style.main}>
              <Link to='/article' onClick={() => {
                setCount('文章')
              }} className={count === '文章' ? 'active' + ' ' + style.active : ''}>{t('文章')}</Link>
              <Link to='/archives' onClick={() => {
                setCount('归档')
              }} className={count === '归档' ? 'active' + ' ' + style.active : ''}>{t("归档")}</Link>
              <Link to='/knowledge' onClick={() => {
                setCount('知识小册')
              }} className={count === '知识小册' ? 'active' + ' ' + style.active : ''}>{t('知识小册')}</Link>
              <Link to='/messageboard' onClick={() => {
                setCount('留言板')
              }} className={count === '留言板' ? 'active' + ' ' + style.active : ''} >{t("留言板")}</Link>
              <Link to='/into' onClick={() => {
                setCount('关于')
              }} className={count === '关于' ? 'active' + ' ' + style.active : ''}>{t("关于")}</Link>
              <div>
                {/* 切换语言 */}
                <I18nBth />
              </div>
              <div>
                {/* 切换主题 */}
                <ThemeBth />
              </div>
              <div>
                {/* 模糊搜索 */}
                <Searcht />
              </div>
              <div>
                {/* 登录 */}
                <BaseLogin />
              </div>
            </div>
            <div className={'footer' + ' ' + style.footer}>
              <AntdMenu />
            </div>
          </div >

        </div>
      </Sticky>
    </>
  )

}

export default BaseHeader